{{title this.crate.name}}

<div class="crates-heading" data-test-heading>
  <div class="wide">
    <div class='info'>
      {{svg-jar "crate" local-class='crate-icon'}}
      <h1 data-test-crate-name>{{ this.crate.name }}</h1>
      <h2 data-test-crate-version>{{ this.currentVersion.num }}</h2>
    </div>

    <div class='right'>
      {{#if this.session.currentUser}}
        <FollowButton @crate={{this.crate}}/>
      {{/if}}
    </div>
  </div>

  <div class="quick-links">
    <ul>
      {{#if this.crate.homepage}}
        <li><a href="{{this.crate.homepage}}">Homepage</a></li>
      {{/if}}
      {{#if this.crate.wiki}}
        <li><a href="{{this.crate.wiki}}">Wiki</a></li>
      {{/if}}
      {{#if this.crate.mailing_list}}
        <li><a href="{{this.crate.mailing_list}}">Mailing list</a></li>
      {{/if}}
      {{#if this.crate.documentation}}
        <li><a href="{{this.crate.documentation}}">Documentation</a></li>
      {{/if}}
      {{#if this.crate.repository}}
        <li><a href="{{this.crate.repository}}">Repository</a></li>
      {{/if}}
      <li>
        <LinkTo @route="crate.reverse-dependencies" @query={{hash dependency=this.crate.crate_id}} data-test-reverse-deps-link>
          Dependent crates
        </LinkTo>
      </li>
    </ul>
  </div>
</div>

<div class='crate-info'>
  <div class='docs'>
    {{#if this.currentVersion.yanked}}
      <p>
        This crate has been yanked, but it is still available for download for other crates that
        may be depending on it.
      </p>
      <p>
        You may wish to <LinkTo @route="crate.versions" @model={{this.crate}}>view all versions</LinkTo> to find
        one that has not been yanked.
      </p>
    {{else}}
      <div class='install'>
        <div class='action'>Cargo.toml</div>
        <code id="crate-toml">{{ this.crateTomlText }}</code>
        {{#if (is-clipboard-supported)}}
          <CrateTomlCopy @copyText={{this.crateTomlText}} />
        {{/if}}
      </div>
      {{#if this.crate.readme}}
        <section class="crate-readme" aria-label="Readme" {{highlight-syntax selector="pre > code"}}>
          {{html-safe this.crate.readme}}
        </section>
      {{else}}
        {{#if this.crate.description}}
          <div class='about'>
            <h3>About This Package</h3>
            <p>{{ this.crate.description }}</p>
          </div>
        {{/if}}
      {{/if}}
    {{/if}}
  </div>
  {{#if this.notYankedOrIsOwner}}
    <section class='authorship' aria-label="Crate metadata">
      <div class='top'>
        <div>
          <div class='last-update'><span class='small'>Last Updated</span></div>
          <div class='{{if this.currentVersion.crate_size 'date-with-small-margin-bot' 'date'}}'>{{moment-from-now this.crate.updated_at}}</div>
          {{#each this.crate.annotated_badges as |badge|}}
            <p>
              {{component badge.component_name badge=badge}}
            </p>
          {{/each}}
        </div>

        {{#if this.currentVersion.crate_size}}
          <div>
            <div class='crate-size'><span class='small'>Crate Size</span></div>
            <div class='size'>{{format-crate-size this.currentVersion.crate_size}}</div>
          </div>
        {{/if}}

        <div class="authors">
          <h3>Authors</h3>
          <ul>
            {{#each this.displayedAuthors as |author|}}
              <li>{{ format-email author.name }}</li>
            {{/each}}
          </ul>
        </div>
      </div>

      <div class='bottom'>
        {{#if this.currentVersion.license}}
          <div>
            <h3>License</h3>
            <p class="license" data-test-license>{{ this.currentVersion.license }}</p>
          </div>
        {{/if}}

        {{#unless this.crate.keywords.isPending}}
          {{#if this.anyKeywords}}
            <div>
              <h3>Keywords</h3>
              <ul class='keywords'>
                {{#each this.keywords as |keyword|}}
                  <li><LinkTo @route="keyword" @model={{keyword}}>{{keyword.id}}</LinkTo></li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
        {{/unless}}

        {{#unless this.crate.categories.isPending}}
          {{#if this.anyCategories}}
            <div>
              <h3>Categories</h3>
              <ul class='categories'>
                {{#each this.categories as |category|}}
                  <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
        {{/unless}}

        <div id='crate-owners'>
          <h3>Owners</h3>

          {{#if this.isOwner}}
            <p>
              <LinkTo @route="crate.owners" @model={{this.crate}}>
                Manage owners
              </LinkTo>
            </p>
          {{/if}}

          <ul class='owners' data-test-owners>
            {{#each this.crate.owner_team as |team|}}
              <li>
                <LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
                  <UserAvatar @user={{team}} @size="medium-small" />
                </LinkTo>
              </li>
            {{/each}}

            {{#each this.crate.owner_user as |user|}}
              <li>
                <LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
                  <UserAvatar @user={{user}} @size="medium-small" />
                </LinkTo>
              </li>
            {{/each}}
          </ul>
        </div>

        <div class='section' id='crate-versions' data-test-versions>
          <h3>Versions</h3>
          <ul>
            {{#each this.smallSortedVersions as |version|}}
              <li>
                <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
                  {{ version.num }}
                </LinkTo>
                <span class='date'>{{moment-format version.created_at 'll'}}</span>
                {{#if version.yanked}}
                  <span class='yanked'>yanked</span>
                {{/if}}
              </li>
            {{/each}}
          </ul>
          <span class='small'>
            {{#if this.hasMoreVersions}}
              <LinkTo @route="crate.versions" @model={{this.crate}} data-test-all-versions-link>
                show all {{ this.crate.versions.length }} versions
              </LinkTo>
            {{/if}}
          </span>
        </div>

        <div class='section' id='crate-dependencies'>
          <h3>Dependencies</h3>
          <ul>
            {{#each this.currentDependencies as |dep|}}
              <li><LinkToDep @dep={{dep}} /></li>
            {{else}}
              {{#if (is-pending this.currentDependencies)}}
                <li>Loading…</li>
              {{else}}
                <li>None</li>
              {{/if}}
            {{/each}}
          </ul>
        </div>

        {{#if this.currentBuildDependencies}}
          <div class='section' id='crate-build-dependencies'>
            <h3>Build-Dependencies</h3>
            <ul>
              {{#each this.currentBuildDependencies as |dep|}}
                <li><LinkToDep @dep={{dep}} /></li>
              {{/each}}
            </ul>
          </div>
        {{/if}}

        {{#if this.currentDevDependencies}}
          <div class='section' id='crate-dev-dependencies'>
            <h3>Dev-Dependencies</h3>
            <ul>
              {{#each this.currentDevDependencies as |dep|}}
                <li><LinkToDep @dep={{dep}} /></li>
              {{/each}}
            </ul>
          </div>
        {{/if}}
      </div>
    </section>
  {{/if}}
</div>

{{#unless this.currentVersion.yanked}}
  <div id='crate-downloads'>
    <div class='stats'>
      {{#if this.downloadsContext.num}}
        <h3 data-test-crate-stats-label>
          Stats Overview for {{this.downloadsContext.num}}
          <LinkTo @route="crate" @model={{this.crate}}>(see all)</LinkTo>
        </h3>

      {{else}}
        <h3 data-test-crate-stats-label>Stats Overview</h3>
      {{/if}}
      <div class='stat'>
        <span class='num'>
          {{svg-jar "download"}}
          <span class="num__align">{{ format-num this.downloadsContext.downloads }}</span>
        </span>
        <span class='desc small'>Downloads all time</span>
      </div>
      <div class='stat'>
        <span class="{{if this.crate.versions.isPending 'loading'}} num">
          {{svg-jar "crate"}}
          <span class="num__align">{{ this.crate.versions.length }}</span>
        </span>
        <span class='desc small'>Versions published</span>
      </div>
    </div>
    <div class='graph'>
      <h4>Downloads over the last 90 days</h4>
      <DownloadGraph @data={{this.downloadData}} />
    </div>
  </div>
{{/unless}}
